<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../css/layout_flex.css">
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .header, .footer {

            width: 100%;
            line-height: 50px;
            color: #FFF;
            background: #249ff1;
            text-align: center;
        }

        .header {
            position: fixed;
            top: 0;
            left: 0;
        }

        .footer {
            position: fixed;
            bottom: 0;
            left: 0;
        }

        .container {
            /*  padding: 20px;*/
            background: red;
            /*这里代表内容*/
            width: 100%;
            height: 100%;
            /*flex: 1;*/
            /*margin-top: 50px;*/
            /*position: fixed;*/
            border-top: 50px solid transparent; /*上边框宽度等于header高度*/
            border-bottom: 50px solid transparent; /*下边框宽度等于footer高度*/
        }

        .warp {
            font-size: 30px;
            position: relative;
        }
    </style>
    <script>
        // var secHeight = document.documentElement.clientHeight;
        // document.getElementById('container').style.height = secHeight+'px';

        document.getElementById("container").style.height = document.getElementById("container").offsetHeight; //仅IE
        document.getElementById("container").style.height = document.getElementById("container").offsetHeight + "px"; //兼容FF、IE等
    </script>
</head>
<body>
<div class="warp flex-y">
    <div class="header">这里头</div>
    <div class="container" id="container">
        内容111111111111111111111111111111111
        <h6>h哈哈</h6>
        <h6>h哈哈</h6>
        <h6>h哈哈</h6>
        <h6>h哈哈</h6>
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈啊我打我的券而且二群二哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>啊我打我的通过</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈阿瓦达无哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈啊我打我的券而且二群二哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>啊我打我的通过</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈阿瓦达无哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈啊我打我的券而且二群二哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>啊我打我的通过</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈阿瓦达无哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈</h6>-->
        <!--<h6>h哈哈22222222222222222222222</h6>-->

    </div>
    <div class="footer">脚布局</div>
</div>

</body>
</html>